<template>
  <div id="root">
    <iframe src="http://127.0.0.1:9998/api/thymeleaf/loginBackground" style="position: fixed;left:0;top:0;z-index: 100" :width="winWidth" :height="winHeight"></iframe>
    <div class="center login">
      <div class="center form" style="margin: 20px 0px 10px 0px;width: 65%;height: fit-content;top: 45%">
        <a-form
          id="formLogin"
          style="padding: 25% 10px"
          ref="formLogin"
          :form="form"
          @submit="handleSubmit"
        >
          <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 10px;" :message="this.errorMsg" />
          <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="登录账号"
              style="color: white"
              v-decorator="['loginName', {rules: [{ required: true, message: '请输入登录账号', trigger: 'blur' }]}]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>
          <a-form-item style="margin-top: 30px;">
            <a-input
              size="large"
              type="password"
              autocomplete="false"
              placeholder="密码"
              v-decorator="['loginPwd', {rules: [{ required: true, message: '请输入登录密码' },{ validator: validateLoginPwd, trigger: 'blur' }]}]"
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>

          <a-form-item style="margin-top: 30px;">
            <a-row :gutter="12">
              <a-col :span="13">
                <a-input
                  size="large"
                  type="text"
                  autocomplete="false"
                  placeholder=" 验 证 码"
                  v-decorator="[
                    'authCode',
                    {rules: [{ required: true, message: '请输入验证码' }]}
                  ]"
                >
                  <a-icon slot="prefix" type="safety" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
              </a-col>
              <a-col :span="11">
                <img :src="imageCode" style="margin-top: -6px;" @click="getKaptcha" width="110px"/>
              </a-col>
            </a-row>
          </a-form-item>
          <a-row :gutter="12" style="height: 50px">
            <a-col :md="12" :sm="24">
              <a-form-item>
                <a
                  class="button a second"
                  style="width: 80%"
                  @click="handleSubmit"
                ><span></span>
                  <span></span>
                  <span></span>
                  <span></span>登录</a>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item>
                <a
                  class="button a third"
                  style="width: 80%"
                  @click="register"
                ><span></span>
                  <span></span>
                  <span></span>
                  <span></span>注册</a>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div >
    </div>
  </div>
</template>
<script>
  import md5 from 'md5'
  import { mapActions } from 'vuex'
  import { timeFix } from '@/utils/util'
  import { kaptcha } from '@/api/system/account'

  export default {
    data () {
      return {
        loginBtn: false,
        isLoginError: false,
        errorMsg: '用户名或密码错误',
        randomUuid: '',
        imageCode: '',
        form: this.$form.createForm(this),
        state: {},
        winHeight: '',
        winWidth: ''
      }
    },
    created () {
      const _this = this
      this.winWidth = window.innerWidth
      this.winHeight = window.innerHeight
      kaptcha()
        .then(res => {
          if (res.data.message !== 'error') {
            _this.randomUuid = res.data.result.uuid
            _this.imageCode = res.data.result.image
          } else {
            this.$message.error('操作失败！')
          }
        })
    },
    mounted () {
    },
    methods: {
      ...mapActions(['Login', 'Logout']),
      // handler
      // 前端验证登录密码的合法性
      validateLoginPwd (rule, value, callback) {
        const regex = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,}$/
        if (regex.test(value)) {
          return callback()
        } else {
          return callback(new Error('大/小写字母，数字，特殊符号四选三，长度至少6位'))
        }
      },
      handleTabClick (key) {
      },
      getKaptcha () {
        const _this = this
        kaptcha()
          .then(res => {
            if (res.data.message !== 'error') {
              _this.randomUuid = res.data.result.uuid
              _this.imageCode = res.data.result.image
            } else {
              this.$message.error('操作失败！')
            }
          })
      },
      handleSubmit (e) {
        e.preventDefault()
        const {
          form: { validateFields },
          Login
        } = this
        this.loginBtn = true
        validateFields({ force: true }, (err, values) => {
          const _this = this
          if (!err) {
            const loginParams = { ...values }
            loginParams.loginPwd = md5(values.loginPwd)
            loginParams.randomId = this.randomUuid
            Login(loginParams)
              .then((res) => this.loginSuccess(res))
              .catch(err => this.requestFailed(err))
              .finally(() => {
                _this.loginBtn = false
              })
          } else {
            setTimeout(() => {
              _this.loginBtn = false
            }, 300)
          }
        })
      },
      loginSuccess (res) {
        if (res.data.status === 200) {
          this.$router.push({ path: '/' })
          // 延迟 1 秒显示欢迎信息
          setTimeout(() => {
            this.$notification.success({
              message: '欢迎',
              description: `${timeFix()}，欢迎回来`
            })
          }, 200)
        } else {
          this.isLoginError = true
          this.errorMsg = res.data.message
        }
      },
      requestFailed (err) {
        this.isLoginError = true
        this.$notification['error']({
          message: '错误',
          description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
          duration: 4
        })
      },
      register () {
        window.open('./register')
      }
    }
  }
</script>

<style scoped src="@/CSS/button.css" />
<style lang="less" scoped>
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      background-color: #28C5D7;
      border: 2px solid #28C5D7;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }
      .register {
        float: right;
      }
    }
  }
  .center {
    position: absolute;
    left: 50%; top:50%;
    transform: translate(-50%, -50%);
  }
  ::v-deep .ant-input {
    background: rgba(0,0,0,0) !important;
    border: 1px solid white;
    border-radius: 18px;
  }
  ::v-deep .ant-input-l {
    background: unset !important;
    border: 1px solid white;
    border-radius: 18px;
  }
  ::v-deep .anticon {
    color: rgba(255,255,255,0.8) !important;
  }
  .login {
    z-index: 101;
    padding: 10% 4%;
    width: 28%;
    height: 70%;
  }
  .user {
    width: 30%;
    background-size: 100%, 100%
  }
  .form {
    width: 100%;
    height: 100%;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    border-radius: 15px;
    background-color: rgba(255,255,255,0.1);
    border-top: rgba(255,255,255,0.7) 1px solid;
    border-left: rgba(255,255,255,0.7) 1px solid;
    backdrop-filter: blur(2px);
  }
</style>
